<template>
  <div class="LoginOrReGisterContainer">
    <WindowTab obj="register" :mini="false" :full="false"></WindowTab>
    <h2 class="text-center text-2xl text-white font-semibold my-6">注册</h2>
    <div class="w-full flex flex-col justify-center items-center">
      <el-form ref="registerFormRef" :model="registerForm" :rules="RegisterRules" class="w-full px-6">
        <el-form-item prop="name">
          <el-input v-model="registerForm.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" type="password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="repeat_password">
          <el-input v-model="registerForm.repeat_password" type="password" placeholder="请输入重复密码" />
        </el-form-item>
        <el-form-item prop="captchaVal">
          <div class="flex flex-row jus-between items-center gap-4">
            <el-input v-model="registerForm.captchaVal" placeholder="请输入验证码" />
            <el-image :src="captchaImage" class="w-[140px] h-[38px] cursor-pointer" @click="Captcha" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button class="w-full my-2" type="primary" @click="RegisterSubmit(registerFormRef)"> 注册 </el-button>
        </el-form-item>
      </el-form>
      <div class="flex flex-col justify-center items-center gap-2 mt-2">
        <!-- 提示 -->
        <p class="text-xs text-[#303133]">
          已有账号？<span class="text-sky-500 font-bold ml-2 cursor-pointer" @click="GoLogin">立即登陆</span>
        </p>
        <p class="text-xs text-[#303133]">&copy; 2025 Abstract UI - All Rights Reserved.</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, toRaw } from "vue";
import { GetCaptcha, Register } from "@/api/user.ts";
import { RegisterRules } from "@/utils/common";
import { ElMessage, ElForm } from "element-plus";
import WindowTab from "@/components/WindowTab/index.vue";

let captchaImage = ref<string>("");
let loading = ref<boolean>(false);
// 表单
const registerFormRef = ref();
const registerForm = reactive({
  name: "",
  password: "",
  captchaVal: "",
  repeat_password: "",
  captchaId: "",
});

// 点击注册
async function RegisterSubmit(formEl: InstanceType<typeof ElForm> | undefined) {
  loading.value = true;
  if (!formEl) {
    loading.value = false;
    return;
  }
  try {
    await formEl.validate();
    const rawFormData = toRaw(registerForm);
    const res: any = await Register(rawFormData);
    if (!res || res.status !== 200) return;
    ElMessage.success("注册成功");
    setTimeout(() => {
      window.electronApi.closePage("register", true);
    }, 600);
  } catch (error) {
    console.error(`注册出现错误, ${error}`);
  } finally {
    loading.value = false;
  }
}

// 获取验证码
async function Captcha() {
  let res: any = await GetCaptcha();
  if (!res) return;
  registerForm.captchaId = res.captchaId;
  captchaImage.value = import.meta.env.VITE_API_Captcha + res.captcha_url;
}

// 点击跳转到登陆
function GoLogin() {
  window.electronApi.closePage("register", true);
}

Captcha();
</script>

<style lang="scss" scoped>
@import url("@/assets/css/loginOrRegster/index.css");
</style>
